<template>
    <div class="pkg-desc-bar">
        <div class="item text-small" :key="index">
            <div class="avatar-box">
                <img src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/img-d.jpg" mode="aspectFill" alt="" />
            </div>
            <div class="text">
                <div class="grey-text-color">造型</div>
                <div class="font-bold">{{value1}}</div>
            </div>
        </div>
        <div class="item text-small" :key="index">
            <div class="avatar-box">
                <img src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/img-a.jpg" mode="aspectFill" alt="" />
            </div>
            <div class="text">
                <div class="grey-text-color">拍摄</div>
                <div class="font-bold">{{value2}}</div>
            </div>
        </div>
        <div class="item text-small" :key="index">
            <div class="avatar-box">
                <img src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/img-b.jpg" mode="aspectFill" alt="" />
            </div>
            <div class="text">
                <div class="grey-text-color">精修</div>
                <div class="font-bold">{{value3}}</div>
            </div>
        </div>
        <div class="item text-small" :key="index">
            <div class="avatar-box">
                <img src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/img-c.jpg" mode="aspectFill" alt="" />
            </div>
            <div class="text">
                <div class="grey-text-color">团队</div>
                <div class="font-bold">首席</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PkgDescBar',
    props: {
        value1: {
            type: String,
        },
        value2: {
            type: String,
        },
        value3: {
            type: String,
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.pkg-desc-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid rgba(187, 187, 187, 0.27);
    .item {
        display: flex;
        align-items: center;
        .avatar-box {
            width: 30px;
            height: 30px;
            margin-right: 10rpx;
            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
}
</style>
